<template>
  <el-input :placeholder="cityToStr(cityObject)" disabled>
    <template #prepend>
      <el-popover trigger="click">
        <city-auto-complete @select="setCity($event)">
        </city-auto-complete>
        <template #reference>
          <el-button type="primary" :icon="Aim" style="display: inline-block"/>
        </template>
      </el-popover>
    </template>
    <template #append>
      <el-button :icon="Close" @click="setCity(undefined)"/>
    </template>
  </el-input>
</template>

<script setup>
import {Aim, Close} from '@element-plus/icons-vue'
import CityAutoComplete from "~/components/CityAutoComplete.vue";
import {cityToStr} from "~/config/utils.js";

const out = defineProps({
  cityObject: {type: Object}
})
const emit = defineEmits(["update:cityObject"])
const setCity = (value) => {
  console.log(out)
  emit("update:cityObject",value)
}

</script>

<style scoped>

</style>